<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
	<meta name="renderer" content="webkit" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-title" content="" />
	<meta name="format-detection" content="telephone=no,email=no,adress=no" />
	<link rel="stylesheet" type="text/css" href="css/test.css" />
	<link rel="stylesheet" href="css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="css/app.css" />
	<link href="css/mui.picker.css" rel="stylesheet" />
	<link href="css/mui.poppicker.css" rel="stylesheet" />
	<link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/YmDAMEQVbLJpVbKiRQVX.css" />
	<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
	<script src="https://gw.alipayobjects.com/os/antv/assets/f2/3.3.8/f2.min.js"></script>
	<title>评价管理系统</title>
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
			overflow: auto;
		}

		body {
			background: url(images/bg.png) no-repeat left top;
			background-size: 100%;
		}
		
		.mui-btn {
			font-size: 16px;
			padding: 8px;
			margin: 3px;
		}
		h5.mui-content-padded {
			margin-left: 3px;
			margin-top: 20px !important;
		}
		h5.mui-content-padded:first-child {
			margin-top: 12px !important;
		}
		.ui-alert {
			text-align: center;
			padding: 20px 10px;
			font-size: 16px;
		}
	</style>
	<script>
		window.addEventListener('pageshow', function( e ){
			if (e.persisted) {
				window.location.reload()
			}
		})
		console.log("是否登录",localStorage.getItem('logined'))
		if(!localStorage.getItem('logined')){
			alert('请登录!');
			window.history.back(-1); 
		}
	</script>
</head>


<body class="homeBg">
	<header class="headTop">
		<p>评价管理系统</p>
		<img src="images/back.png" onclick="javascript:history.back(-1);">
	</header>
	<section class="contentNei">
		<div class="loginInFg zhong center">
			<img src="images/user.png">
			<p id="username">用户名</p>
		</div>
		<!-- 002 -->
		<!-- 内容开始 -->
		<article class="homeCenter">
			<!-- 03 -->
			<div class="homeRule">
				<div class="homeRuleTxt">•　类型　•</div>
				<div class="loginWhite loginWhiteDown">
					<!-- 中间的连接符 -->
					<div class="homeRuleLian"><img src="images/line.png"></div>
					<div class="homeRuleLianRight"><img src="images/line.png"></div>
					<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>全部</button>
					<!--<ul id="typeList">
						<li>
							<p class='active'>全部</p>
						</li>
						<li>
							<p>食堂</p>
						</li>
					</ul>-->
				</div>

				<div class="loginWhite loginWhiteShu">
					<p id="zwsj" style="display:none">暂无数据</p>
					<ul id="loginShuBox">
						<!-- <li>
							<figure class="zhong center" onclick="loginDetails()">
								<figcaption>乌鲁木齐公寓食堂</figcaption>
								<img src="images/goRight.png">
							</figure>
							<div class="loginShuBox">
								<span>图表区</span>
								<div class="chart-wrapper">
									<canvas id="mountNode"></canvas>
								</div>
							</div>
						</li> -->
					</ul>
				</div>
			</div>
		</article>
	</section>
</body>

<script src="js/mui.min.js"></script>
<script src="js/mui.picker.js"></script>
<script src="js/mui.poppicker.js"></script>
<script type="text/javascript">
	var baseUrl = localStorage.getItem('baseUrl');
	var organ = JSON.parse(localStorage.getItem('organ'));
	var user = JSON.parse(localStorage.getItem('user'));
	var typeId = 1;
	var params = {
		organzationId: user.organizationId,
	}
		var cw = document.documentElement.clientWidth, ch = document.documentElement.clientWidth * 0.6;
		console.log(cw * 0.7)
	$('#organName').html(organ.organName)
	// 设置顶部用户名称
	$('#username').html(user.username);
	// 获取并渲染类型列表

	$(function () {
		$(document).on('click', '.loginWhiteDown ul li', function () {
			$(this).addClass('active').siblings().removeClass('active');
		})
	});
	// 下拉选择框
	var userPicker;
	/* 类型下拉选择 */
	(function($, doc) {
		$.init();
		$.ready(function() {
			/**
				* 获取对象属性的值
				* 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
				* @param {Object} obj 对象
				* @param {String} param 属性名
				*/
			var _getParam = function(obj, param) {
				return obj[param] || '';
			};
			
			userPicker = new $.PopPicker();
			// 点击出现下拉选择内容
			var showUserPickerButton = doc.getElementById('showUserPicker');
			// var userResult = doc.getElementById('userResult');
			showUserPickerButton.addEventListener('tap', function(event) {
				userPicker.show(function(items) {
					//userResult.innerText = JSON.stringify(items[0]);
					//返回 false 可以阻止选择框的关闭
					//return false;
					showUserPickerButton.innerText = items[0].text;
					handleFilter(items[0].value);
				});
			}, false);
		});
	})(mui, document);

	function handleFilter(id) {
		console.log('aaaa', id);
		typeId = id;
		if (id == "0") {
			delete params.typeId
		} else {
			params.typeId = id
		}
		getList();
	}
	getTypeList();
	getList();
	// 获取类型列表
	function getTypeList() {
		$.ajax({
			url: baseUrl + '/organ-type/list',
			method: 'get',
			data: {
				page: 1,
				size: 9999
			},
			success: function (res) {
				console.log("类型列表", res);
				var typeList = res.data.item;
				if (!typeList) {
					typeList = []
				}
				var tempList = [];
				tempList.push(
					//`<li class="active" onclick="handleFilter(0)">
					//	<p>全部</p>
					//</li>`
					{
						value:0,
						text:'全部'
					}
				)
				for (var i = 0; i < typeList.length; i++) {
					var element = typeList[i];
					tempList.push(
						//`<li onclick="handleFilter(${element.id})">
						//	<p>${element.organTypeName}</p>
						//</li>`
						{
							value:element.id,
							text:element.organTypeName
						}
					)
				}
				userPicker.setData(tempList);
				//$('#typeList').html(tempList.join(""))
				
				//普通示例
				//userPicker.setData([{
				//	value: 'ywj',
				//	text: '食堂1'
				//}, {
				//	value: 'aaa',
				//	text: '食堂2'
				//}, {
				//	value: 'lj',
				//	text: '食堂3'
				//}, {
				//	value: 'ymt',
				//	text: '食堂4'
				//}, {
				//	value: 'shq',
				//	text: '食堂5'
				//}]);

			}
		})
	}
	// 获取报表列表
	function getList() {
		$.ajax({
			url: baseUrl + '/report/list',
			method: 'get',
			data: params,
			success: function (res) {
				var item = res.data.item;
				var dataList = [];
				var htmlList = [];
				if(item.length===0){
					$('#zwsj').show();
					$('#loginShuBox').hide();
				}else{
					$('#zwsj').hide();
					$('#loginShuBox').show();
				}
				for (var i = 0; i < item.length; i++) {
					var el = item[i];
					var data = [];
					for (var j = 0; j < el.datax.length; j++) {
						data.push({
							name: '满意',
							月份: el.datax[j]+'',
							人数: el.datay[0][j]
						})
						data.push({
							name: '一般',
							月份: el.datax[j]+'',
							人数: el.datay[1][j]
						})
						data.push({
							name: '不满意',
							月份: el.datax[j]+'',
							人数: el.datay[2][j]
						})
					}
					console.log('aaaa', data)
					dataList.push(data);
					htmlList.push(`
						<li>
							<figure class="zhong center" onclick="loginDetails(${el.id})">
								<figcaption>${el.organName}</figcaption>
								<img src="images/goRight.png">
							</figure>
							<div class="loginShuBox">
								<!-- 图表区 -->
								<div class="chart-wrapper">
									<canvas id="mountNode${i}"></canvas>
								</div>
							</div>
						</li>
					`);
				}
				console.log("htmllist", htmlList)
				$('#loginShuBox').html(htmlList.join(""));
				for (var k = 0; k < item.length; k++) {
					console.log("a")
					var chart = new F2.Chart({
						id: 'mountNode' + k,
						pixelRatio: window.devicePixelRatio
					});
					console.log('data', dataList[k])
					chart.source(dataList[k], {
						月份: {
							type: 'cat',
							tickCount: 5,
							range: [0.08, 0.95],
							formatter: function formatter(ivalue) {
								return ivalue + '月';
							}
						},
						人数: {
							tickCount: 5,
							min:0
						}
					});

					chart.guide().text({
						position: ['min', 'max'],
						content: '人数',
						style: {
							fill: '#3554D3',
							fontSize: '16'
						},
						offsetX: -10,
						offsetY: -22
					});

					chart.legend({
						position: 'bottom',
						align: 'center',
						nameStyle: {
							fill: '#3554D3',
							fontSize: '12'
						}
					});

					chart.tooltip(false);

					chart.axis('月份', {
						label: (text) => {
							const cfg = {};
							cfg.fill = '#3554D3';
							return cfg;
						}
					});
					chart.axis('人数', {
						label: function label(text) {
							var cfg = {};
							cfg.fill = '#3554D3';
							return cfg;
						}
					})

					chart.interval().position('月份*人数')
						.color('name', (value) => {
							if (value == '满意') {
								return 'l(90) 0:#6A88FF 1:#0034FF';
							} else if (value == '一般') {
								return 'l(90) 0:#B59AFF 1:#5E37C7';
							} else {
								return 'l(90) 0:#A8ACBB 1:#626265';
							}
						})
						.size(7)
						.adjust({
							type: 'dodge',
							marginRatio: 0.5
						})
						.style({
							radius: [4, 4, 0, 0]
						})
						.animate({
							appear: {
								delay: 0,
								duration: 4000,
								animation: 'groupWaveIn',
								easing: 'quadraticOut'
							}
						});

					chart.render();
				}
				for (var k = 0; k < item.length; k++) {
					$('#mountNode' + k).css({
						'width': Math.floor(cw * 0.8),
						'height': Math.floor(ch),
						'margin': '0 auto'
					});
				}
				console.log("报表列表", res)
			}
		})
	}
	// 跳转到详情页面
	function loginDetails(id) {
		$(window).attr('location', 'loginDetails.html?organId=' + id);
	}
</script>
<script>
	var Shape = F2.Shape;
	var Util = F2.Util;
	Shape.registerShape('interval', 'text', {
		draw: function draw(cfg, container) {
			var points = this.parsePoints(cfg.points);
			// points 顶点的顺序
			// 1 ---- 2
			// |      |
			// 0 ---- 3
			var style = Util.mix({
				fill: cfg.color,
				z: true // 需要闭合
			}, cfg.style);
			var intervalShape = container.addShape('rect', {
				attrs: Util.mix({
					x: points[1].x,
					y: points[1].y,
					width: points[2].x - points[1].x,
					height: points[0].y - points[1].y
				}, style)
			});

			var origin = cfg.origin._origin; // 获取对应的原始数据记录
			var textShape = container.addShape('text', {
				zIndex: 1,
				attrs: {
					x: (points[1].x + points[2].x) / 2,
					y: points[1].y - 5, // 往上偏移 5 像素
					text: origin['人数'],
					fill: '#808080',
					textAlign: 'center',
					textBaseline: 'bottom',
					fontSize: 10 // 字体大小
				}
			});
			container.sort();
			return [intervalShape, textShape];
		}
	});


	// var data = [{
	// 	name: '满意',
	// 	月份: '1',
	// 	人数: 18.9
	// }, {
	// 	name: '满意',
	// 	月份: '2',
	// 	人数: 28.8
	// }, {
	// 	name: '满意',
	// 	月份: '3',
	// 	人数: 39.3
	// }, {
	// 	name: '满意',
	// 	月份: '4',
	// 	人数: 81.4
	// }, {
	// 	name: '满意',
	// 	月份: '5',
	// 	人数: 47
	// }, {
	// 	name: '满意',
	// 	月份: '6',
	// 	人数: 20.3
	// }, {
	// 	name: '满意',
	// 	月份: '7',
	// 	人数: 20.3
	// }

	// 	, {
	// 	name: '一般',
	// 	月份: '1',
	// 	人数: 12.4
	// }, {
	// 	name: '一般',
	// 	月份: '2',
	// 	人数: 23.2
	// }, {
	// 	name: '一般',
	// 	月份: '3',
	// 	人数: 34.5
	// }, {
	// 	name: '一般',
	// 	月份: '4',
	// 	人数: 99.7
	// }, {
	// 	name: '一般',
	// 	月份: '5',
	// 	人数: 52.6
	// }, {
	// 	name: '一般',
	// 	月份: '6',
	// 	人数: 35.5
	// }, {
	// 	name: '一般',
	// 	月份: '7',
	// 	人数: 35.5
	// }

	// 	, {
	// 	name: '不满意',
	// 	月份: '1',
	// 	人数: 12.4
	// }, {
	// 	name: '不满意',
	// 	月份: '2',
	// 	人数: 23.2
	// }, {
	// 	name: '不满意',
	// 	月份: '3',
	// 	人数: 34.5
	// }, {
	// 	name: '不满意',
	// 	月份: '4',
	// 	人数: 99.7
	// }, {
	// 	name: '不满意',
	// 	月份: '5',
	// 	人数: 52.6
	// }, {
	// 	name: '不满意',
	// 	月份: '6',
	// 	人数: 35.5
	// }, {
	// 	name: '不满意',
	// 	月份: '7',
	// 	人数: 35.5
	// }];
	// var chart = new F2.Chart({
	// 	id: 'mountNode',
	// 	pixelRatio: window.devicePixelRatio
	// });

	// chart.source(data, {
	// 	月份: {
	// 		type: 'cat',
	// 		tickCount: 5,
	// 		range: [0.08, 0.95],
	// 		formatter: function formatter(ivalue) {
	// 			return ivalue + '月';
	// 		}
	// 	},
	// 	人数: {
	// 		tickCount: 5
	// 	}
	// });

	// chart.guide().text({
	// 	position: ['min', 'max'],
	// 	content: '人数',
	// 	style: {
	// 		fill: '#3554D3',
	// 		fontSize: '16'
	// 	},
	// 	offsetX: -10,
	// 	offsetY: -22
	// });

	// chart.legend({
	// 	position: 'bottom',
	// 	align: 'center',
	// 	nameStyle: {
	// 		fill: '#3554D3',
	// 		fontSize: '1'
	// 	}
	// });

	// chart.tooltip(false);

	// chart.axis('月份', {
	// 	label: (text) => {
	// 		const cfg = {};
	// 		cfg.fill = '#3554D3';
	// 		return cfg;
	// 	}
	// });
	// chart.axis('人数', {
	// 	label: function label(text) {
	// 		var cfg = {};
	// 		cfg.fill = '#3554D3';
	// 		return cfg;
	// 	}
	// })

	// chart.interval().position('月份*人数')
	// 	.color('name', (value) => {
	// 		if (value == '满意') {
	// 			return 'l(90) 0:#6A88FF 1:#0034FF';
	// 		} else if (value == '一般') {
	// 			return 'l(90) 0:#B59AFF 1:#5E37C7';
	// 		} else {
	// 			return 'l(90) 0:#A8ACBB 1:#626265';
	// 		}
	// 	})
	// 	.size(7)
	// 	.adjust({
	// 		type: 'dodge',
	// 		marginRatio: 0.5
	// 	})
	// 	.style({
	// 		radius: [4, 4, 0, 0]
	// 	})
	// 	.animate({
	// 		appear: {
	// 			delay: 0,
	// 			duration: 4000,
	// 			animation: 'groupWaveIn',
	// 			easing: 'quadraticOut'
	// 		}
	// 	});

	// chart.render();
</script>
</html>